<template name="teacherList">
	<view>
		<view class="teacherBox">
			<view class="titleBox">
				<text class="title">名师中心</text>
				<text class="title2" @tap="toPage" :data-id="storeId" data-url="teacherList">全部{{tList.length}}位老师</text>
				<text class="iconfont icon-right" @tap="toPage" :data-id="storeId" data-url="teacherList"></text>
			</view>
			<view class="teacherList">
				<block  v-for="(item,index) in tList" :key="index">
					<view v-if="item!=null&&index<3" class="teacherItem"  @tap="toPage" data-url="teacherDetail" :data-id="item.id" :data-sid="storeId">
						<image :src="item.img"></image>
						<text class="tname">{{item.name}}</text>
						<text class="jiaoling">{{item.workAge==0?'新老师':item.workAge+'年教龄'}}</text>
						<!-- <text class="kecheng">{{item.kecheng}}</text> -->
					</view>
					
				</block>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'teacherList', //组件名称
		// 传递参数
		props: {
			tList: {
				type: Array,
				default: null
			},
			storeId:{
				type:Number,
				default:0
			}
		},
		// 组件参数
		data() {
			return {
				data1: 'value1'
			}
		},
		// 组件方法
		methods: {
			mtd1() {

			}
		}
	}
</script>

<style lang="less">
	@import "@/common/public.less";

	.teacherBox {
		display: flex;
		background-color: #FFFFFF;
		margin-top: 13upx;
		flex-direction: column;
		padding: 28upx;

		.titleBox {
			display: flex;
			align-items: baseline;
			margin-bottom: 36upx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #202932;
				flex: 1;
			}

			.title2 {
				font-size: 28rpx;
				color: #9c9c9c;
			}

			.iconfont {
				font-size: 28upx;
				color: #9c9c9c;
				margin-left: 6upx;
			}
		}

		.teacherList {
			display: flex;

			.teacherItem {
				width: 33.33%;
				display: flex;
				flex-direction: column;
				align-items: center;
				flex-shrink: 0;
				image {
					width: 163upx;
					height: 163upx;
					border-radius: 50%;
					margin-bottom: 12upx;
				}

				.tname {
					font-size: 26upx;
					color: #202932;
					margin-bottom: 6upx;
				}

				.jiaoling {
					font-size: 26upx;
					font-weight: bold;
					color: #ff9000;
					margin-bottom: 6upx;
				}

				.kecheng {
					font-size: 22upx;
					color: #6b6f72;
				}
			}
		}
	}
</style>
